<template>
    <nav class="myNav" :class="{totop:isTop}">
        <ul class="leftNav">
            <li>
                <router-link to="/" class="navList" style="color: #AB7A42;">首页</router-link>
            </li>
            <li>
                <router-link to="/special" class="navList">在拍专场 <span>({{nums}})</span></router-link>
            </li>
            <li>
                <router-link to="/online" class="navList">线上拍品 <span>({{specialingNums}})</span></router-link>
            </li>
            <li>
                <router-link to="" class="navList">往期专场 <span>({{passNums}})</span></router-link>
            </li>
            <li>
                <router-link to="" class="navList">拍品征集</router-link>
            </li>
            <li>
                <router-link to="" class="navList">关于我们</router-link>
            </li>
            <li class="shop" style="font-size: 16px;">
                <el-icon style="color:#AB7A42 ;">
                    <Management />
                </el-icon>
                <router-link to="" class="navList">逛店铺</router-link>
            </li>

        </ul>
        <ul class="rightNav">
            <li>
                <div class="navList">
                    <noLgoin v-if="!Authorization" />
                    <afterLogin v-else />
                </div>
                <loginRlist v-if="showModel[0]" @show-usermodel-event="userModel" :btnxx="showUserModel"
                    :Author="Authorization" />
                <!-- <router-view /> -->
                <!-- <router-link to="" class="navList">登录/注册</router-link> -->

            </li>
            <li>
                <router-link to="/personal" class="navList">个人中心</router-link>
            </li>
            <li>
                <router-link to="" class="navList">卖家中心</router-link>
            </li>
            <li class="navList" @click="selling()">我要拍卖</li>
        </ul>

    </nav>
</template>

<script lang="ts">
import { getNums } from '@/utils/api';
import { defineComponent } from 'vue';
//使用组件导入并注册
import loginRlist from '@/components/header/loginRlist.vue'
import noLgoin from '@/components/header/noLgoin.vue'
import afterLogin from '@/components/header/afterLogin.vue';
export default defineComponent({
    data() {
        return {
            nums: 0,
            passNums: 0,
            specialingNums: 0,
            isTop: false,
            showUserModel: false,
            Authorization: '',
            showModel:[false,false,false,false]
        }
    },
    components: {
        loginRlist,
        noLgoin,
        afterLogin,
    },
    methods: {

        userModel(data1: unknown) {
            console.log(data1);
            this.showUserModel = !this.showUserModel;
        },
        selling() {
            this.$router.push({
                path: '/sell',
                name: 'sell',
            })
        },
        scrollToTop() {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop > 60) {
                this.isTop = true;
            } else {
                this.isTop = false;
            }
        },
    },
    mounted() {
        //获取专场数，在线拍品，往期拍品
        getNums().then((res) => {
            this.nums = res.data.nums;
            this.specialingNums = res.data.specialingNums;
            this.passNums = res.data.passNums;
            // console.log(res);
        }).catch((error) => {
            console.log(error);
        });
      
        window.addEventListener('scroll', this.scrollToTop, true);
      
        //  //你完全可以发起ajax请求获取session信息
         if (window.localStorage.getItem('nickname')) {
          this.Authorization = window.localStorage.getItem('nickname') as unknown as string;
        }


    },
    unmounted() {
        window.removeEventListener('scroll', this.scrollToTop, true);
    }

    

});

</script>

<style lang="scss" scoped>
.totop {
    position: fixed;
    top: 0;
    background-color: white;
    z-index: 999;
}

.myNav {
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #BF925F;

    .leftNav {
        width: 711px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .rightNav {
        width: 442px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

span {
    color: #AB7A42;
}

.shop {
    width: 94px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #AB7A42;
}

.navList:hover {
    color: #AB7A42;
}


.navList {
    color: #000;
}


.zcdl {
    margin-top: 10px;
    width: 60px;
    height: 20px;
    font-size: 13px;
    border: 1px solid red;
    border-radius: 7px;
}

</style>


      
  


